<template>
  <div>
    <!-- 基本指标 -->
    <el-card shadow="hover" class="mb-6">
      <template #header>
        <div class="font-semibold">📊 基本指标</div>
      </template>
      <div class="grid grid-cols-3 gap-6 text-center">
        <div>
          <div class="text-2xl font-bold text-green-600">{{ result.successful_requests }}</div>
          <div class="text-sm text-gray-500">成功请求数</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-red-600">{{ result.failed_requests }}</div>
          <div class="text-sm text-gray-500">失败请求数</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-blue-600">{{ result.concurrent_users }}</div>
          <div class="text-sm text-gray-500">并发用户数</div>
        </div>
      </div>
    </el-card>

    <!-- 响应时间 -->
    <el-card shadow="hover" class="mb-6">
      <template #header>
        <div class="font-semibold">⏱ 响应时间统计（毫秒）</div>
      </template>
      <el-table :data="[responseTime]" size="medium" stripe>
        <el-table-column label="指标" width="100">
          <template #default>
            <span class="font-medium">响应时间</span>
          </template>
        </el-table-column>
        <el-table-column label="平均" prop="average" width="120">
          <template #default="{ row }"> {{ formatNum(row.average) }} ms </template>
        </el-table-column>
        <el-table-column label="最小" prop="min" width="120">
          <template #default="{ row }"> {{ formatNum(row.min) }} ms </template>
        </el-table-column>
        <el-table-column label="最大" prop="max" width="120">
          <template #default="{ row }"> {{ formatNum(row.max) }} ms </template>
        </el-table-column>
        <el-table-column label="P95" prop="p95" width="120">
          <template #default="{ row }"> {{ formatNum(row.p95) }} ms </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 状态码分布 -->
    <el-card shadow="hover">
      <template #header>
        <div class="font-semibold">📈 状态码分布</div>
      </template>
      <el-table :data="statusCodes" size="medium" stripe>
        <el-table-column label="状态码" prop="code" width="120">
          <template #default="{ row }">
            <el-tag :type="getStatusCodeType(row.code)">{{ row.code }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="出现次数" prop="count" width="120" />
        <el-table-column label="占比" width="120">
          <template #default="{ row }">
            {{ ((row.count / result.total_requests) * 100).toFixed(1) }}%
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  result: { type: Object, required: true },
})

const responseTime = computed(() => props.result.response_times_ms || {})
const statusCodes = computed(() => {
  return Object.entries(props.result.status_codes || {}).map(([code, count]) => ({
    code: Number(code),
    count,
  }))
})

const getStatusCodeType = (code) => {
  if (code >= 200 && code < 300) return 'success'
  if (code >= 400) return 'danger'
  if (code >= 300) return 'warning'
  return 'info'
}

const formatNum = (num) => {
  return Number.isFinite(num) ? num.toFixed(2) : '0.00'
}
</script>
